<template>
  <div id="pageHome">
    <v-widget title="站点通知" contentBg="white" class="mb-3">
      <div slot="widget-content">{{ this.$store.getters.app_notification }}</div>
    </v-widget>
    <v-card v-for="article in articles" :key="article.id" class="elevation-1 mb-3 pa-2" tile>
      <v-card-title primary-title>
        <div>
          <div class="headline">{{ article.title }}</div>
          <p class="text-xs-left grey--text">
            {{ article.updated_at }}&nbsp;/&nbsp;
            <v-icon small>far fa-eye</v-icon>&nbsp;123&nbsp;/&nbsp;
            <v-icon small>far fa-comments</v-icon>&nbsp;123&nbsp;
          </p>
        </div>
      </v-card-title>
      <v-card-text>{{ article.description }}</v-card-text>
      <v-card-actions>
        <v-btn flat color="red">分享</v-btn>
        <v-btn flat color="indigo">概览</v-btn>
        <v-spacer></v-spacer>
        <v-btn flat :to="{name:'article',params:{id:article.id}}">
          <v-icon small>fas fa-eye</v-icon>&nbsp;查看全文
        </v-btn>
      </v-card-actions>
    </v-card>
    <div v-if="pagination.count > 0" class="text-xs-center">
      <v-pagination v-model="pagination.current_page" :length="pagination.total_pages"></v-pagination>
    </div>
  </div>
</template>
<script>
import VWidget from '@/components/VWidget'
import { getAllArticles } from '@/api/resource/articles'
export default {
  name: 'app-home',
  data: () => ({
    articles: [],
    pagination: {
      count: 0,
      current_page: 1,
      links: [],
      per_page: 15,
      total: 0,
      total_pages: 1
    }
  }),
  components: { VWidget },
  methods: {
    init () {
      let _this = this
      getAllArticles().then(res => {
        _this.artilces = res.data
        _this.pagination = res.meta.pagination
      })
    }
  },
  created () {
    this.init()
  },
  mounted () {

  }
}
</script>
